//https://github.com/leftstick/angular2-baidu-map/tree/3.x
//http://leftstick.github.io/angular2-baidu-map/#/apidoc/marker

import {
  Component,
  OnInit,
  AfterViewInit,
  ChangeDetectorRef
} from "@angular/core";
import {HttpServcie} from "../../../service/http.service";
import {Router} from "@angular/router";
import {
  NzNotificationService,
  NzModalService,
  NzModalSubject
} from "ng-zorro-antd";

import {
  MapOptions,
  Point,
  MarkerOptions,
  NavigationControlOptions,
  ControlAnchor,
  NavigationControlType,
  OverviewMapControlOptions,
  ScaleControlOptions,
  MapTypeControlOptions,
  MapTypeControlType,
  GeolocationControlOptions
} from "angular2-baidu-map";
import {SpotCheckPlan} from "../../maintenancePlan/bean/spotCheckPlan";
import * as moment from "moment";

@Component({
  selector: "map-demo",
  templateUrl: "./map-demo.html",
  styleUrls: ["map-demo.scss"]
})
export class MapDemo implements OnInit {
  public opts: MapOptions;
  public markers: Array<{ point: Point; options?: MarkerOptions }> = [];
  public controlOpts: NavigationControlOptions;
  public overviewmapOpts: OverviewMapControlOptions;
  public scaleOpts: ScaleControlOptions;
  public mapTypeOpts: MapTypeControlOptions;
  public geolocationOpts: GeolocationControlOptions;
  isLoaded = false;
  currentModal: NzModalSubject;
  eleData: any;
  isVisible: boolean = false;

  // 是否显示
  public nzSpinning: boolean = false;
  // 下拉列表
  public selectList:any =[];
  // 获取点击的值
  public selectId:any;
  // 电梯类型
  public typeList: any = [
    {
      name: '自动人行道',
      value: '6'
    }, {
      name: '液压驱动电梯',
      value: '2'
    }, {
      name: '杂物电梯',
      value: '3'
    }, {
      name: '自动扶梯',
      value: '4'
    }, {
      name: '载客电梯',
      value: '1'
    }, {
      name: '载货电梯',
      value: '5'
    }
  ]
  // 获取电梯类型
  public typeId:any;


  constructor(
    private httpServcie: HttpServcie,
    private router: Router,
    private _notification: NzNotificationService,
    private modalService: NzModalService,
    private cd: ChangeDetectorRef
  ) {
  }

  ngAfterViewInit() {

    // 系统默认初始化是苏州地区
    let lng = 120.5909845209;
    let lat = 31.3012267162;
    let zoom = 10;

    // 南京市
    if ((window.location.href + "").indexOf("wzscjg.hyjckj.net") >= 0) {
      lng = 118.8070551533;
      lat = 32.0283985494;
      zoom = 13;
    }
    //121.550823,31.227036
    if ((window.location.href + "").indexOf("pdscjg.hyjckj.net") >= 0) {
      lng = 121.550823;
      lat = 31.227036;
      zoom = 13;
    }
    this.opts = {
      centerAndZoom: {
        // 设置中心点和缩放级别
        lng: lng, // 经度
        lat: lat, // 纬度
        zoom: zoom // 缩放级别
      },
      minZoom: 3, // 最小缩放级别的地图
      maxZoom: 19, // 最大缩放级别的地图
      enableHighResolution: true, // 是否用高分辨率的地图，default：true
      enableAutoResize: true, // 是否可以自动调整大小，default：true
      enableMapClick: true, // 地图是否可以点击，default：true
      disableDragging: false, // 是否禁用地图拖动功能
      enableScrollWheelZoom: true, // 是否启用滚轮进行缩放功能
      disableDoubleClickZoom: false, // 是否禁用双击缩放功能
      enableKeyboard: true, // 是否启用键盘移动地图功能
      enableInertialDragging: false, // 是否启用惯性阻力函数
      enableContinuousZoom: true, // 是否启用连续缩放功能
      disablePinchToZoom: false, // 是否禁用缩放功能的缩放
      cursor: "", // 设置默认的光标样式,应该遵循CSS规范
      draggingCursor: "", // 设置默认的拖动光标样式，应该遵循CSS规范
      currentCity: "苏州市" // 设置当前的城市
    };

    // 这是控件control
    this.controlOpts = {
      // 导航控件
      anchor: ControlAnchor.BMAP_ANCHOR_TOP_LEFT, // 显示的控件的位置
      type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE, // 用来描述它是什么样的导航
      offset: {
        // 控件的大小
        width: 50,
        height: 50
      },
      showZoomInfo: true, // 是否展示当前的信息
      enableGeolocation: true // 是否启用地理定位功能
    };
    this.overviewmapOpts = {
      // 地图全景控件
      anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT, // 显示的控件的位置
      isOpen: true // whf 。。官网里没有说明？？
    };
    this.scaleOpts = {
      // 比例尺控件
      anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
    };
    this.mapTypeOpts = {
      // 地图类型
      type: MapTypeControlType.BMAP_MAPTYPE_CONTROL_HORIZONTAL
    };
    this.isLoaded = true;
    this.cd.detectChanges();
  }

  ngOnInit() {

    let partyId = JSON.parse(window.localStorage.getItem("user")).partyId;
    if (partyId == null || partyId == undefined || partyId == '') {
      this._notification.create("error", "错误提示", "您没有权限查看");
      this.nzSpinning = false;
    }
    // 通过当前角色的等级
    let partyLevel = JSON.parse(window.localStorage.getItem("user")).partyLevel;
    // 通过当前角色的父级等级
    this.httpServcie.queryListByLevel({"partyId":partyId,"partyLevel":partyLevel}).subscribe(data => {
      if (data.status == "200") {
        this.selectList = data.data
      } else {
        this._notification.create("error", "错误提示", data.message);
      }
    });
  }

  /*点击查询，查询电梯位置*/
  queryData() {
    this.markers = [];
    if (this.selectId == null || this.selectId == undefined) {
      this._notification.create("info", "错误提示", "请先选择监管名称");
      return false;
    }
    if (this.typeId == null || this.typeId == undefined) {
      this._notification.create("info", "错误提示", "请先选择电梯类型");
      return false;
    }
    this.nzSpinning = true;
    this.httpServcie.getLatLngByLevel({"selectId": this.selectId,"typeId":this.typeId}).subscribe(data => {
      this.nzSpinning = false;
      if (data.status == "200") {
        console.log(data);
        if (data.data && data.data.length > 0) {
          console.log(data.data);
          this.markers = data.data;
        }else{
          this._notification.create("info", "错误提示", "暂无数据");
        }
      } else {
        this._notification.create("error", "错误提示", data.message);
      }
    });
  }


  /**
   *
   *
   *     this.httpServcie.getLatLng({"partyId": partyId}).subscribe(data => {
      if (data.status == 200) {
        this.nzSpinning = false;

        if (data.data && data.data.length > 0) {
          data.data.forEach(el => {
            if (el.lat && el.lng) {
              if (el.placeType != '重点场所' || null == el.placeType || undefined == el.placeType) {
                let point = {
                  options: {
                    icon: {
                      imageUrl: "assets/images/ok.png",
                      size: {height: 32, width: 20},
                      anchor: {height: 30, width: 10}
                    },
                    title: el.elevatorNum + " " + el.elevatorPlace + " " + el.typeName
                  },
                  point: {lng: el.lng, lat: el.lat}
                };
                this.markers.push(point);
              } else {
                let point = {
                  options: {
                    icon: {
                      imageUrl: "assets/images/nom.png",
                      size: {height: 32, width: 20},
                      anchor: {height: 30, width: 10}
                    },
                    title: el.elevatorNum + " " + el.elevatorPlace + " " + el.typeName
                  },
                  point: {lng: el.lng, lat: el.lat}
                };
                this.markers.push(point);
              }
            }
          });
        }

        let __this = this;
        setTimeout(function () {
          var eles = ((document.getElementsByClassName('BMap_Marker BMap_noprint')));
          for (let i = 0; i < eles.length; i++) {
            if (eles[i].getAttribute('title')) {
              eles[i].addEventListener("click", function (e) {
                let elevatorNum = e.srcElement.getAttribute('title').substring(0, 20);
                let param = {
                  pageSize: 10,
                  currentPage: 1,
                  elevatorNum: elevatorNum
                }
                __this.httpServcie.queryJgElevator(param).subscribe(
                  data => {
                    if (data.status == 200) {
                      this.list = data.data.list;
                      if (data.data.list.length > 0) {
                        // __this.eleData = data.data.list[0];
                        // __this.isVisible = true;
                        __this.router.navigate(["/home/elevator-detail", data.data.list[0]]);
                      }
                    } else if (data.status === 401) {
                      this.router.navigateByUrl("/login");
                      return;
                    } else {
                      // 异常
                      this._notification.create("error", "错误提示", data.message);
                    }
                  },
                  error => {
                    console.log(JSON.stringify(error));
                  }
                );

              });
            }
          }
        }, 1000)
      } else {
        this._notification.create("error", "失败", "获取电梯位置信息失败");
      }
    });
   *
   * @param event
   */




  addOutPut(event) {
    this.isVisible = false;
  }

  handleCancel() {
    this.isVisible = false;
  }
}
